<template>
  <!-- 具有某种分类的那些课程 -->
  <div class="categoryCourseContainer">
    <!-- 放课程前面的东西 -->
    <div class="category-header">
      <el-row>
        <el-col :span="2">&nbsp;{{ recommend.title }}</el-col>
        <el-col
          v-for="item in categorys"
          :key="item"
          class="category"
          :class="selectItem == item ? 'active' : ''"
          @click.native="selectItem = item"
          :span="2"
          >{{ item }}</el-col
        >
      </el-row>
    </div>

    <!-- 放许多的课程 -->
    <div class="course-box">
      <el-row :gutter="20">
        <el-col :span="6" v-for="item in courses" :key="item.cid"
          ><courser-box @click.native="openCourseDetail(item)" :course="item"></courser-box
        ></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import CourserBox from "@/components/CourserBox.vue";
export default {
  name: "CategoryCourse",
  props: ["recommend","openCourseDetail"],
  components: { CourserBox },
  data() {
    return {
      selectItem: "",
    };
  },
  mounted() {
    this.selectItem = this.categorys[0];
  },
  computed: {
    categorys() {
      return Object.keys(this.recommend.categorys);
    },
    courses() {
      return this.recommend.categorys[this.selectItem];
    },
  },
};
</script>

<style lang='less' scoped>
.categoryCourseContainer {
  width: 95%;
  height: 280px;
  margin: 40px auto;
  .category-header {
    .el-row {
      margin-bottom: 20px;
      .el-col {
        color: #666;
        height: 35px;
        cursor: pointer;
        transition: color 0.3s ease;
        &:nth-child(1) {
          color: #333;
          font-size: 24px;
          font-weight: 500;
          text-align: left;
        }
      }
    }
  }

  .course-box {
    .el-row {
      .el-col {
        margin-bottom: 40px;
      }
    }
  }
}
.active {
  color: #00cc7e !important;
  border-bottom: 2px solid #00cc7e;
}
</style>